// index.js

import { createElement, render, renderDom } from './element';
// +++ 引入diff和patch方法
import diff from './diff';
import patch from './patch';
// +++

function numsItem(length) {
  const arr = [];
  for (let index = 0; index < length; index++) {
    // console.log(index, 'index')
    arr.push(createElement('li', { class: 'item' }, ['周杰伦' + index]
    ));
  };
  return arr
}

let virtualDom = createElement('ul', { class: 'list' }, numsItem(1000));
let el = render(virtualDom);
renderDom(el, window.root);

// react之diff算法篇  
// +++
// 创建另一个新的虚拟DOM
let virtualDom2 = createElement('ul', { class: 'list-group' }, [
  createElement('li', { class: 'item active' }, ['七里香']),
  createElement('li', { class: 'item' }, ['一千年以后']),
  createElement('li', { class: 'item' }, ['需要人陪'])
]);
// diff一下两个不同的虚拟DOM
let patches = diff(virtualDom, virtualDom2);
console.log(patches);
// 将变化打补丁，更新到el
patch(el, patches);
console.timeEnd();
  // +++


